<template>
  <d2-container class="ghost">
    <!-- 查询条件 -->
    <template slot="header">
      <div class="assign-header">
        <el-form :inline="true" :model="searchForm" ref="searchForm">
          <el-form-item>
            当前站点： {{ team.name }}
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-position" @click="assign">批量分配</el-button>
          </el-form-item>
          <el-form-item label="老人姓名" style="margin-left: 20px;" prop="name">
            <el-input v-model="searchForm.name" clearable placeholder="老人姓名" @change="clear" @clear="clear"></el-input>
          </el-form-item>
          <el-form-item label="是否分配" prop="have_team">
            <el-select v-model="searchForm.have_team" clearable @clear="clear" @change="clear" placeholder="请选择是否分配站点">
              <el-option label="未分配" value="1"></el-option>
              <el-option label="已分配" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" :disabled="loading">查询</el-button>
            <el-button @click="onReset" :disabled="loading">重置</el-button>
          </el-form-item>
        </el-form>
        <i class="el-icon-close" style="font-size: 20px; color: #72767b;" @click="close"></i>
      </div>
    </template>

    <!-- Table组件 -->
    <main-table :columns="columns" :data="tableList" :pagination="pagination" @getData="fetchTableList" @handleSelectChange="handleSelectChange" @selectAll="selectAll" :loading="loading" wrapperHeight="calc(100% - 10px)">
      <!-- wrapperHeight：父元素高度根据实际布局情况配置，大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度，如果外层祖父元素高度或者兄弟元素的高度不固定，可能需要借助 js来计算 -->
      <el-table-column slot="team_id" label="分配状态" align="center" width="140">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.team_id" type="success">已分配</el-tag>
          <el-tag v-else type="warning">未分配</el-tag>
        </template>
      </el-table-column>
      <el-table-column slot="action" fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-popconfirm v-if="!scope.row.team_id" :title="`确定要分配该老人到‘${team.name}’站点吗？`" @confirm="assignone(scope.row)">
            <el-button slot="reference" type="text" class="button-edit-color"><i class="fa fa-sitemap" aria-hidden="true"></i> 分配</el-button>
          </el-popconfirm>
          <el-popconfirm v-if="scope.row.team_id && scope.row.team_id !== team.id" :title="`确定要移动该老人到‘${team.name}’站点吗？`" @confirm="exchange(scope.row)">
            <el-button slot="reference" type="text" class="button-view-color"><i class="fa fa-exchange" aria-hidden="true"></i> 移动</el-button>
          </el-popconfirm>
          <el-popconfirm v-if="scope.row.team_id" title="确定将该老人移出站点吗？" @confirm="del(scope.row)">
            <el-button slot="reference" type="text" class="button-delete-color d2-ml-10"><i class="fa fa-share-square-o" aria-hidden="true"></i> 移出</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </main-table>
  </d2-container>
</template>
<script>
// import * as APITeam from '@/api/team'
import utils from '@/utils'
export default {
  props: {
    team: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      // 查询条件
      searchForm: {
        page: 1
      },
      // 站点列表
      teamList: [],
      dialogVisible: false,
      olderid: '',
      columns: [
        {
          selection: true,
          fixed: true
        },
        {
          index: true,
          fixed: true
        },
        {
          prop: 'name',
          label: '名称',
          width: 100,
          fixed: true
        },
        {
          prop: 'sex',
          label: '性别',
          width: 50,
          formatter (row, column, cellValue) {
            return utils.sex(cellValue)
          }
        },
        {
          prop: 'birthday',
          label: '年龄',
          width: 50,
          formatter (row, column, cellValue) {
            return utils.age(cellValue)
          }
        },
        {
          prop: 's_type',
          label: '老人类型',
          width: 100,
          formatter (row, column, cellValue) {
            return utils.stype(cellValue)
          }
        },
        {
          prop: 'source_type',
          label: '老人来源',
          width: 100,
          formatter (row, column, cellValue) {
            return utils.sourceType(cellValue)
          }
        },
        {
          slot: 'team_id'
        },
        {
          prop: 'address',
          label: '老人住址'
        },
        {
          prop: 'team_name',
          label: '负责站点',
          width: 200
        },
        {
          slot: 'action'
        }
      ],
      tableList: [],
      pagination: {
        current: 1,
        size: 15,
        total: 0
      },
      loading: false,
      selection: []
    }
  },
  created () {
    const team = this.$route.query.team || ''
    if (team) {
      this.searchForm.team_id = team
      this.clear()
    }
  },
  mounted () {
    this.fetchTableList()
  },
  methods: {
    // 选中老人
    handleSelectChange (val) {
      this.selection = val
    },
    // 全选
    selectAll (val) {
      this.selection = val
    },
    // 关闭弹窗
    close () {
      this.$emit('close')
    },
    closeDrawer () {
      this.dialogVisible = false
    },
    // 添加家属
    addContacts (row) {
      this.olderid = row.id
      this.dialogVisible = true
    },
    // 手动清空/搜索
    clear () {
      this.fetchTableList({ page: 1 })
    },
    // 批量添加老人
    assign () {
      const arr = []
      this.selection.forEach(item => {
        arr.push(item.id)
      })
      APITeam.teamFenpeis({ ids: arr.join(','), team_id: this.team.id }).then(res => {
        this.fetchTableList()
      })
    },
    del (row) {
      APITeam.teamQuxiao({ id: row.id }).then(res => {
        this.fetchTableList()
      })
    },
    assignone (row) {
      APITeam.teamFenpei({ id: row.id, team_id: this.team.id }).then(res => {
        this.fetchTableList()
      })
    },
    // 移动老人到站点
    exchange (row) {
      APITeam.teamFenpei({ id: row.id, team_id: this.team.id }).then(res => {
        this.fetchTableList()
      })
    },
    // 获取数据
    fetchTableList (pageObj) {
      this.loading = true
      this.searchForm = {
        ...this.searchForm,
        ...pageObj
      }
      APITeam.teamOlder(this.searchForm).then((res) => {
        const { list = [], total = 0 } = res
        this.tableList = list || []
        this.pagination.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    // 点击”查询“按钮 => 此时缓存查询参数
    onSearch () {
      this.pagination = {
        current: 1,
        size: 15,
        total: 0
      }
      this.fetchTableList()
    },
    // 重置
    onReset () {
      this.$refs.searchForm.resetFields()
      this.fetchTableList()
    },
    // 操作
    showDetail (row) {
      console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
  .assign-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
</style>
